<template>
  <div class="page34" v-loading="loading">
    <div class="page-title">收入环比变化补充说明</div>
    <el-table
      border
      :data="tableData"
      style="width: 100%;margin-top: 20px"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
    >
    <el-table-column label="收入类别" prop="value1" width="200" align="left">
      <template v-slot="{ row }">
        <span class="value1">{{ row.value1 }}</span>
      </template>
    </el-table-column>
    <el-table-column label="值得关注事项" prop="value2" align="left">
      <template v-slot="{ row }">
        <div class="value2" v-for="(item, i) in row.value2" :key="i">
          {{ item }}
        </div>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },  
  data(){
    return {
      loading: false,
      tableData: [],
      headerCellStyle: { 
        backgroundColor: 'rgb(75,172,198)', 
        color: '#fff', 
        fontWeight: '600',
        fontSize: '16px',
        height: '40px',
        padding: '0',
        textAlign: 'center' 
      }
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.getCountyOperationPage34(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        res => {
          if(res.code == 0){
            const { data, indexClass } = res.content;

            this.tableData = indexClass.map(it => {
              return {
                value1: it,
                value2: data[it],
              }
            });
          }
          this.loading = false;
        },
        err => {
          console.log(err);
          this.loading = false;
        }
      )
    },
    cellStyle({ rowIndex, columnIndex }){
      if(rowIndex % 2 == 0){
        return {
          backgroundColor: 'rgb(208,227,234)',
        }
      } else {
        return {
          backgroundColor: 'rgb(233,241,245)',
        }
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.page34 {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
  }
  .value1 {
    font-size: 16px;
    font-weight: 900;
    color: rgb(192,0,0);
  }
  .value2 {
    color: #000;
    font-size: 16px;
    padding-left: 20px;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 7px;
      left: 0;
      width: 10px;
      height: 10px;
      background-color: #000;
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
    }
  }
}
</style>